import { useState } from 'react';
import { 
  RefreshCw, 
  MapPin, 
  Settings as SettingsIcon,
  Clock,
  CheckCircle,
  AlertCircle,
  User,
  Key,
  Copy,
  Server,
  HelpCircle,
  Download,
  ChevronDown
} from 'lucide-react';
import { useLanguage } from '@kernelproxy/i18n';

const DynamicProxy = () => {
  const { language } = useLanguage();
  const [rotationInterval, setRotationInterval] = useState('rotating');
  const [sessionDuration, setSessionDuration] = useState('10');
  const [selectedRegion, setSelectedRegion] = useState('all');
  const [copiedField, setCopiedField] = useState<string | null>(null);
  const [activeProtocol, setActiveProtocol] = useState<'http' | 'socks5'>('http');
  
  // Statistics state
  const [dateRange, setDateRange] = useState('2025-10-05 - 2025-10-10');
  const [unit, setUnit] = useState<'MB' | 'GB'>('MB');
  const [isRefreshing, setIsRefreshing] = useState(false);

  // Mock statistics data (last 6 days)
  const statisticsData = [
    { date: '10-5', value: 0.125 },
    { date: '10-6', value: 0.35 },
    { date: '10-7', value: 0.58 },
    { date: '10-8', value: 0.42 },
    { date: '10-9', value: 0.75 },
    { date: '10-10', value: 0.28 },
  ];

  const handleRefresh = () => {
    setIsRefreshing(true);
    setTimeout(() => setIsRefreshing(false), 1000);
  };

  const handleDownloadReport = () => {
    alert(language === 'zh-CN' ? '正在下载报告...' : 'Downloading report...');
  };

  // Mock proxy credentials
  const proxyHostPort = 'proxy.kernelproxy.com:8080';
  const proxyPassword = 'kp_abc123xyz789';
  
  // Generate username based on rotation strategy
  const generateUsername = () => {
    const parts = [];
    
    // Add rotation interval
    parts.push(`rotate-${rotationInterval}min`);
    
    // Add session duration
    parts.push(`session-${sessionDuration}min`);
    
    // Add region if not all
    if (selectedRegion !== 'all') {
      parts.push(`region-${selectedRegion}`);
    }
    
    return parts.join('_');
  };

  const proxyUsername = generateUsername();

  // Copy to clipboard function
  const copyToClipboard = (text: string, field: string) => {
    navigator.clipboard.writeText(text);
    setCopiedField(field);
    setTimeout(() => setCopiedField(null), 2000);
  };

  const regions = [
    { code: 'all', name: language === 'zh-CN' ? '全部地区' : 'All Regions', count: 50000 },
    { code: 'us', name: language === 'zh-CN' ? '美国' : 'United States', count: 15000 },
    { code: 'eu', name: language === 'zh-CN' ? '欧洲' : 'Europe', count: 12000 },
    { code: 'asia', name: language === 'zh-CN' ? '亚洲' : 'Asia', count: 18000 },
    { code: 'other', name: language === 'zh-CN' ? '其他' : 'Others', count: 5000 },
  ];

  return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
          {language === 'zh-CN' ? '动态住宅代理' : 'Dynamic Residential Proxy'}
        </h1>
        <p className="text-gray-600 dark:text-gray-400 mt-2">
          {language === 'zh-CN' ? '管理您的动态代理池和轮换策略' : 'Manage your dynamic proxy pool and rotation strategies'}
        </p>
      </div>

      {/* Proxy Pool Management */}
      <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
        {/* Rotation Settings */}
        <div className="lg:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
          <div className="flex items-center space-x-2 mb-6">
            <SettingsIcon className="w-5 h-5 text-blue-600 dark:text-blue-400" />
            <h2 className="text-xl font-bold text-gray-900 dark:text-white">
              {language === 'zh-CN' ? '轮换策略设置' : 'Rotation Strategy'}
            </h2>
          </div>

          <div className="space-y-6">
            {/* Session Type */}
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                <RefreshCw className="inline w-4 h-4 mr-2" />
                {language === 'zh-CN' ? '会话类型' : 'Session Type'}
                <span className="group relative inline-block ml-1">
                  <HelpCircle className="inline w-4 h-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-help" />
                  <span className="invisible group-hover:visible absolute left-0 bottom-full mb-2 w-64 p-2 bg-gray-900 dark:bg-gray-700 text-white text-xs rounded-lg shadow-lg z-10">
                    {language === 'zh-CN' ? 'Sticky 代理保持 IP 地址不变' : 'Sticky proxies keep IP address unchanged'}
                    <span className="absolute top-full left-4 -mt-1 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700"></span>
                  </span>
                </span>
              </label>
              <div className="relative">
                <select
                  value={rotationInterval}
                  onChange={(e) => setRotationInterval(e.target.value)}
                  className="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 appearance-none pr-10"
                >
                  <option value="rotating">{language === 'zh-CN' ? '轮换 IP' : 'Rotating IP'}</option>
                  <option value="sticky">{language === 'zh-CN' ? '固定 IP' : 'Sticky IP'}</option>
                </select>
                <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                  <svg className="h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                    <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
                  </svg>
                </div>
              </div>
            </div>

            {/* Session Duration */}
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                <Clock className="inline w-4 h-4 mr-2" />
                {language === 'zh-CN' ? '会话保持时间 (分钟)' : 'Session Duration (minutes)'}
              </label>
              <div className="relative">
                <select
                  value={sessionDuration}
                  onChange={(e) => setSessionDuration(e.target.value)}
                  className="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 appearance-none pr-10"
                >
                  <option value="5">5 {language === 'zh-CN' ? '分钟' : 'minutes'}</option>
                  <option value="10">10 {language === 'zh-CN' ? '分钟' : 'minutes'}</option>
                  <option value="15">15 {language === 'zh-CN' ? '分钟' : 'minutes'}</option>
                  <option value="30">30 {language === 'zh-CN' ? '分钟' : 'minutes'}</option>
                </select>
                <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                  <svg className="h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                    <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
                  </svg>
                </div>
              </div>
            </div>

            {/* Geographic Filter */}
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                <MapPin className="inline w-4 h-4 mr-2" />
                {language === 'zh-CN' ? '地理位置筛选' : 'Geographic Filter'}
              </label>
              <div className="relative">
                <select
                  value={selectedRegion}
                  onChange={(e) => setSelectedRegion(e.target.value)}
                  className="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 appearance-none pr-10"
                >
                  {regions.map((region) => (
                    <option key={region.code} value={region.code}>
                      {region.name} ({region.count.toLocaleString()})
                    </option>
                  ))}
                </select>
                <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                  <svg className="h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                    <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
                  </svg>
                </div>
              </div>
            </div>

            <button className="w-full py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors">
              {language === 'zh-CN' ? '应用设置' : 'Apply Settings'}
            </button>
          </div>
        </div>

        {/* User & Password */}
        <div className="lg:col-span-3 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
          <div className="flex items-center space-x-2 mb-4">
            <User className="w-5 h-5 text-blue-600 dark:text-blue-400" />
            <h2 className="text-lg font-bold text-gray-900 dark:text-white">
              {language === 'zh-CN' ? '用户名和密码' : 'User & Password'}
            </h2>
          </div>

          <div className="space-y-4">
            {/* Host:Port */}
            <div>
              <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
                <Server className="inline w-3 h-3 mr-1" />
                {language === 'zh-CN' ? '主机:端口' : 'Host:Port'}
              </label>
              <div className="flex items-center gap-2">
                <input
                  type="text"
                  value={proxyHostPort}
                  readOnly
                  className="flex-1 px-3 py-2 text-sm font-mono bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white"
                />
                <button
                  onClick={() => copyToClipboard(proxyHostPort, 'hostport')}
                  className="p-2 text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
                  title={language === 'zh-CN' ? '复制' : 'Copy'}
                >
                  {copiedField === 'hostport' ? (
                    <CheckCircle className="w-4 h-4 text-green-600" />
                  ) : (
                    <Copy className="w-4 h-4" />
                  )}
                </button>
              </div>
            </div>

            {/* Username */}
            <div>
              <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
                <User className="inline w-3 h-3 mr-1" />
                {language === 'zh-CN' ? '用户名' : 'Username'}
              </label>
              <div className="flex items-center gap-2">
                <input
                  type="text"
                  value={proxyUsername}
                  readOnly
                  className="flex-1 px-3 py-2 text-sm font-mono bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white"
                />
                <button
                  onClick={() => copyToClipboard(proxyUsername, 'username')}
                  className="p-2 text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
                  title={language === 'zh-CN' ? '复制' : 'Copy'}
                >
                  {copiedField === 'username' ? (
                    <CheckCircle className="w-4 h-4 text-green-600" />
                  ) : (
                    <Copy className="w-4 h-4" />
                  )}
                </button>
              </div>
              <p className="text-xs text-gray-500 dark:text-gray-500 mt-1">
                {language === 'zh-CN' ? '* 用户名会根据左侧轮换策略自动变动' : '* Username changes based on rotation strategy'}
              </p>
            </div>

            {/* Password */}
            <div>
              <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
                <Key className="inline w-3 h-3 mr-1" />
                {language === 'zh-CN' ? '密码' : 'Password'}
              </label>
              <div className="flex items-center gap-2">
                <input
                  type="text"
                  value={proxyPassword}
                  readOnly
                  className="flex-1 px-3 py-2 text-sm font-mono bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white"
                />
                <button
                  onClick={() => copyToClipboard(proxyPassword, 'password')}
                  className="p-2 text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
                  title={language === 'zh-CN' ? '复制' : 'Copy'}
                >
                  {copiedField === 'password' ? (
                    <CheckCircle className="w-4 h-4 text-green-600" />
                  ) : (
                    <Copy className="w-4 h-4" />
                  )}
                </button>
              </div>
            </div>

            {/* Protocol Tabs */}
            <div className="pt-3 border-t border-gray-200 dark:border-gray-700">
              <div className="flex gap-1 border-b border-gray-200 dark:border-gray-700 mb-3">
                <button
                  onClick={() => setActiveProtocol('http')}
                  className={`px-4 py-2 text-sm font-medium transition-all relative ${
                    activeProtocol === 'http'
                      ? 'text-blue-600 dark:text-blue-400'
                      : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'
                  }`}
                >
                  HTTP
                  {activeProtocol === 'http' && (
                    <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-blue-600 dark:bg-blue-400"></div>
                  )}
                </button>
                <button
                  onClick={() => setActiveProtocol('socks5')}
                  className={`px-4 py-2 text-sm font-medium transition-all relative ${
                    activeProtocol === 'socks5'
                      ? 'text-blue-600 dark:text-blue-400'
                      : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'
                  }`}
                >
                  SOCKS5
                  {activeProtocol === 'socks5' && (
                    <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-blue-600 dark:bg-blue-400"></div>
                  )}
                </button>
              </div>

              <div>
                <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
                  {activeProtocol === 'http' 
                    ? (language === 'zh-CN' ? 'HTTP 格式' : 'HTTP Format')
                    : (language === 'zh-CN' ? 'SOCKS5 格式' : 'SOCKS5 Format')
                  }
                </label>
                <div className="flex items-center gap-2">
                  <input
                    type="text"
                    value={`${proxyHostPort}:${proxyUsername}:${proxyPassword}`}
                    readOnly
                    className={`flex-1 px-3 py-2 text-xs font-mono border rounded-lg text-gray-900 dark:text-white ${
                      activeProtocol === 'http'
                        ? 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800'
                        : 'bg-purple-50 dark:bg-purple-900/20 border-purple-200 dark:border-purple-800'
                    }`}
                  />
                  <button
                    onClick={() => copyToClipboard(`${proxyHostPort}:${proxyUsername}:${proxyPassword}`, activeProtocol)}
                    className="p-2 text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
                    title={language === 'zh-CN' ? '复制' : 'Copy'}
                  >
                    {copiedField === activeProtocol ? (
                      <CheckCircle className="w-4 h-4 text-green-600" />
                    ) : (
                      <Copy className="w-4 h-4" />
                    )}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Statistics */}
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
        {/* Header */}
        <div className="flex items-center justify-between mb-6">
          <h2 className="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
            {language === 'zh-CN' ? '统计数据' : 'Statistics'}
            <button
              onClick={handleRefresh}
              disabled={isRefreshing}
              className="p-1.5 text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors disabled:opacity-50"
              title={language === 'zh-CN' ? '刷新实时数据' : 'Refresh for real-time data'}
            >
              <RefreshCw className={`w-4 h-4 ${isRefreshing ? 'animate-spin' : ''}`} />
            </button>
          </h2>
        </div>

        {/* Controls */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
          {/* Date Range Picker */}
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              {language === 'zh-CN' ? '选择时间段' : 'Select a period'}
            </label>
            <input
              type="date"
              value={dateRange}
              onChange={(e) => setDateRange(e.target.value)}
              className="w-full px-4 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent cursor-pointer [color-scheme:light] dark:[color-scheme:dark]"
            />
          </div>

          {/* Filter Websites (placeholder) */}
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              {language === 'zh-CN' ? '过滤网站' : 'Filter websites'}
            </label>
            <div className="relative">
              <input
                type="text"
                placeholder={language === 'zh-CN' ? '过滤' : 'Filter'}
                className="w-full px-4 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
          </div>

          {/* Units Selector */}
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              {language === 'zh-CN' ? '单位' : 'Units'}
            </label>
            <div className="relative">
              <select
                value={unit}
                onChange={(e) => setUnit(e.target.value as 'MB' | 'GB')}
                className="w-full pl-4 pr-10 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent appearance-none cursor-pointer"
              >
                <option value="MB">MB</option>
                <option value="GB">GB</option>
              </select>
              <ChevronDown className="absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" />
            </div>
          </div>
        </div>

        {/* Chart */}
        <div className="relative" style={{ height: '300px' }}>
          {/* Y-axis labels */}
          <div className="absolute left-0 top-0 bottom-8 flex flex-col justify-between text-xs text-gray-500 dark:text-gray-400 pr-2">
            <span>1</span>
            <span>0.875</span>
            <span>0.75</span>
            <span>0.625</span>
            <span>0.5</span>
            <span>0.375</span>
            <span>0.25</span>
            <span>0.125</span>
            <span>0</span>
          </div>

          {/* Chart area */}
          <div className="ml-12 h-full">
            <svg className="w-full h-full" viewBox="0 0 800 300" preserveAspectRatio="none">
              {/* Grid lines */}
              <g className="grid-lines">
                {[0, 1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
                  <line
                    key={i}
                    x1="0"
                    y1={i * (300 / 8)}
                    x2="800"
                    y2={i * (300 / 8)}
                    stroke="currentColor"
                    className="text-gray-200 dark:text-gray-700"
                    strokeWidth="1"
                  />
                ))}
              </g>

              {/* Gradient fill area under the line */}
              <defs>
                <linearGradient id="chartGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                  <stop offset="0%" style={{ stopColor: 'rgb(59, 130, 246)', stopOpacity: 0.3 }} />
                  <stop offset="100%" style={{ stopColor: 'rgb(59, 130, 246)', stopOpacity: 0 }} />
                </linearGradient>
              </defs>

              {/* Fill area under the line */}
              <polygon
                points={`0,300 ${statisticsData.map((d, i) => {
                  const x = (i / (statisticsData.length - 1)) * 800;
                  const y = 300 - (d.value * 300);
                  return `${x},${y}`;
                }).join(' ')} 800,300`}
                fill="url(#chartGradient)"
              />

              {/* Data line */}
              <polyline
                points={statisticsData.map((d, i) => {
                  const x = (i / (statisticsData.length - 1)) * 800;
                  const y = 300 - (d.value * 300);
                  return `${x},${y}`;
                }).join(' ')}
                fill="none"
                stroke="rgb(59, 130, 246)"
                strokeWidth="2"
                className="drop-shadow-sm"
              />

              {/* Data points */}
              {statisticsData.map((d, i) => {
                const x = (i / (statisticsData.length - 1)) * 800;
                const y = 300 - (d.value * 300);
                return (
                  <circle
                    key={i}
                    cx={x}
                    cy={y}
                    r="4"
                    fill="rgb(59, 130, 246)"
                    className="drop-shadow"
                  />
                );
              })}
            </svg>

            {/* X-axis labels */}
            <div className="flex justify-between mt-2 text-xs text-gray-500 dark:text-gray-400">
              {statisticsData.map((d, i) => (
                <span key={i} className="flex-1 text-center">{d.date}</span>
              ))}
            </div>
          </div>
        </div>

        {/* Footer */}
        <div className="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
          <p className="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-2">
            <AlertCircle className="w-4 h-4" />
            {language === 'zh-CN' 
              ? '您最近的使用数据可能需要最多 24 小时才能刷新。' 
              : 'It might take up to 24 hours for your most recent usage data to refresh.'}
          </p>
          <button
            onClick={handleDownloadReport}
            className="flex items-center gap-2 px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
          >
            <Download className="w-4 h-4" />
            {language === 'zh-CN' ? '下载报告' : 'Download report'}
          </button>
        </div>
      </div>

      {/* Blacklist/Whitelist Management */}
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
        <div className="flex items-center space-x-2 mb-4">
          <AlertCircle className="w-5 h-5 text-orange-600 dark:text-orange-400" />
          <h2 className="text-xl font-bold text-gray-900 dark:text-white">
            {language === 'zh-CN' ? '黑白名单管理' : 'Blacklist / Whitelist'}
          </h2>
        </div>
        <p className="text-gray-600 dark:text-gray-400 text-sm mb-4">
          {language === 'zh-CN' 
            ? '管理IP黑名单和白名单，控制代理访问规则' 
            : 'Manage IP blacklist and whitelist to control proxy access rules'}
        </p>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <button className="py-3 px-4 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
            {language === 'zh-CN' ? '管理白名单' : 'Manage Whitelist'}
          </button>
          <button className="py-3 px-4 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
            {language === 'zh-CN' ? '管理黑名单' : 'Manage Blacklist'}
          </button>
        </div>
      </div>
    </div>
  );
};

export default DynamicProxy;
